<template>
  <div class="child-inline-block box">
    <div v-if="label">
      <span>{{ label }}:</span>
    </div>
    <div>
      <div v-if="!multi" class="single-select child-inline-block">
        <div>
          <span v-for="(tag, index) in items" :key="index" @click="click(tag)">
            {{ tag.label }}
          </span>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-plus" @click="multi = true"
            >多选</el-button
          >
        </div>
      </div>
      <div v-if="multi" class="multi-select">
        <div>
          <el-checkbox-group v-model="selectedData">
            <el-checkbox
              v-for="item in items"
              :label="item.id"
              :key="item.label"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div>
          <el-button size="mini" @click="enterMulti">确认</el-button>
          <el-button size="mini" @click="multi=false">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      multi: false,
      data: [],
      selectedData: [],
    };
  },
  methods:{
    change(){
      this.$emit('select', this.data)
      this.multi = false 
    },
    click(item){
      this.data = [item]
      this.change()
    },
    enterMulti(){
      this.data = this.items.filter(item=>this.selectedData.includes(item.id))
      this.change()
      this.selectedData = []
    }
  },
  model:{
    prop: 'data'
  },
  props: {
    label: String,
    items: Array
  },
};
</script>

<style scoped>
.box {
  position: relative;
  width: 100%;
  height: 70px;
}

.box > :first-child {
  font-weight: bold;
  width: 20%;
}

.box > :last-child {
  width: 80%;
}

.single-select > :first-child{
    width: 80%;
}

.single-select > :first-child > span{
    display: inline-block;
    padding: 20px;
    cursor: pointer;
}

.single-select > :first-child > span:hover{
    color: #005aaa;
}

.single-select div:last-child{
  top: 18px;
  position: absolute;
  right: 0px;
}

.multi-select {
  box-shadow: 0px 2px 5px rgba(2, 2, 2, 0.322);
  padding: 10px;
}

.multi-select > :last-child {
  padding-top: 5px;
  text-align: center;
}
</style>